<template>
    <div class="Tabs">

        <div class="navtitle">
                <ul>
                    <li class="con"><a href="#">题材</a></li>
                    <li><a href="#">风格</a></li>
                    <li><a href="#">设备</a></li>
                    <li><a href="#">地区</a></li>
                    
                    
                </ul>
            </div>
        <div class="main">
            <div class="container">
                <router-link tag="div" to="/about" class="box">
                    <div class="contentbox">
                        <div class="topmain">
                            <div class="bigimg">
                                <img src="../assets/img/ia_100000164.jpg" alt="" class="auto-img">
                            </div>
                            <div class="imglit">
                                <div class="lit con1">
                                    <img src="../assets/img/ia_100000165.jpg" alt="" class="auto-img">
                                </div>
                                <div class="lit con2">
                                    <img src="../assets/img/ia_100000166.jpg" alt="" class="auto-img">
                                </div>
                            </div>
                        </div>
                        <h3>旅行</h3>
                    </div>
                    <div class="contentbox">
                        <div class="topmain">
                            <div class="bigimg">
                                <img src="../assets/img/ia_100000164.jpg" alt="" class="auto-img">
                            </div>
                            <div class="imglit">
                                <div class="lit con1">
                                    <img src="../assets/img/ia_100000165.jpg" alt="" class="auto-img">
                                </div>
                                <div class="lit con2">
                                    <img src="../assets/img/ia_100000166.jpg" alt="" class="auto-img">
                                </div>
                            </div>
                        </div>
                        <h3>旅行</h3>
                    </div>
                    <div class="contentbox">
                        <div class="topmain">
                            <div class="bigimg">
                                <img src="../assets/img/ia_100000164.jpg" alt="" class="auto-img">
                            </div>
                            <div class="imglit">
                                <div class="lit con1">
                                    <img src="../assets/img/ia_100000165.jpg" alt="" class="auto-img">
                                </div>
                                <div class="lit con2">
                                    <img src="../assets/img/ia_100000166.jpg" alt="" class="auto-img">
                                </div>
                            </div>
                        </div>
                        <h3>旅行</h3>
                    </div>
                    <div class="contentbox">
                        <div class="topmain">
                            <div class="bigimg">
                                <img src="../assets/img/ia_100000164.jpg" alt="" class="auto-img">
                            </div>
                            <div class="imglit">
                                <div class="lit con1">
                                    <img src="../assets/img/ia_100000165.jpg" alt="" class="auto-img">
                                </div>
                                <div class="lit con2">
                                    <img src="../assets/img/ia_100000166.jpg" alt="" class="auto-img">
                                </div>
                            </div>
                        </div>
                        <h3>旅行</h3>
                    </div>
                    <div class="contentbox">
                        <div class="topmain">
                            <div class="bigimg">
                                <img src="../assets/img/ia_100000164.jpg" alt="" class="auto-img">
                            </div>
                            <div class="imglit">
                                <div class="lit con1">
                                    <img src="../assets/img/ia_100000165.jpg" alt="" class="auto-img">
                                </div>
                                <div class="lit con2">
                                    <img src="../assets/img/ia_100000166.jpg" alt="" class="auto-img">
                                </div>
                            </div>
                        </div>
                        <h3>旅行</h3>
                    </div>
                    <div class="contentbox">
                        <div class="topmain">
                            <div class="bigimg">
                                <img src="../assets/img/ia_100000164.jpg" alt="" class="auto-img">
                            </div>
                            <div class="imglit">
                                <div class="lit con1">
                                    <img src="../assets/img/ia_100000165.jpg" alt="" class="auto-img">
                                </div>
                                <div class="lit con2">
                                    <img src="../assets/img/ia_100000166.jpg" alt="" class="auto-img">
                                </div>
                            </div>
                        </div>
                        <h3>旅行</h3>
                    </div>
                    <div class="contentbox">
                        <div class="topmain">
                            <div class="bigimg">
                                <img src="../assets/img/ia_100000164.jpg" alt="" class="auto-img">
                            </div>
                            <div class="imglit">
                                <div class="lit con1">
                                    <img src="../assets/img/ia_100000165.jpg" alt="" class="auto-img">
                                </div>
                                <div class="lit con2">
                                    <img src="../assets/img/ia_100000166.jpg" alt="" class="auto-img">
                                </div>
                            </div>
                        </div>
                        <h3>旅行</h3>
                    </div>
                    <div class="contentbox">
                        <div class="topmain">
                            <div class="bigimg">
                                <img src="../assets/img/ia_100000164.jpg" alt="" class="auto-img">
                            </div>
                            <div class="imglit">
                                <div class="lit con1">
                                    <img src="../assets/img/ia_100000165.jpg" alt="" class="auto-img">
                                </div>
                                <div class="lit con2">
                                    <img src="../assets/img/ia_100000166.jpg" alt="" class="auto-img">
                                </div>
                            </div>
                        </div>
                        <h3>旅行</h3>
                    </div>
                    <div class="contentbox">
                        <div class="topmain">
                            <div class="bigimg">
                                <img src="../assets/img/ia_100000164.jpg" alt="" class="auto-img">
                            </div>
                            <div class="imglit">
                                <div class="lit con1">
                                    <img src="../assets/img/ia_100000165.jpg" alt="" class="auto-img">
                                </div>
                                <div class="lit con2">
                                    <img src="../assets/img/ia_100000166.jpg" alt="" class="auto-img">
                                </div>
                            </div>
                        </div>
                        <h3>旅行</h3>
                    </div>
                    <div class="contentbox">
                        <div class="topmain">
                            <div class="bigimg">
                                <img src="../assets/img/ia_100000164.jpg" alt="" class="auto-img">
                            </div>
                            <div class="imglit">
                                <div class="lit con1">
                                    <img src="../assets/img/ia_100000165.jpg" alt="" class="auto-img">
                                </div>
                                <div class="lit con2">
                                    <img src="../assets/img/ia_100000166.jpg" alt="" class="auto-img">
                                </div>
                            </div>
                        </div>
                        <h3>旅行</h3>
                    </div>
                    <div class="contentbox">
                        <div class="topmain">
                            <div class="bigimg">
                                <img src="../assets/img/ia_100000164.jpg" alt="" class="auto-img">
                            </div>
                            <div class="imglit">
                                <div class="lit con1">
                                    <img src="../assets/img/ia_100000165.jpg" alt="" class="auto-img">
                                </div>
                                <div class="lit con2">
                                    <img src="../assets/img/ia_100000166.jpg" alt="" class="auto-img">
                                </div>
                            </div>
                        </div>
                        <h3>旅行</h3>
                    </div>
                    <div class="contentbox">
                        <div class="topmain">
                            <div class="bigimg">
                                <img src="../assets/img/ia_100000164.jpg" alt="" class="auto-img">
                            </div>
                            <div class="imglit">
                                <div class="lit con1">
                                    <img src="../assets/img/ia_100000165.jpg" alt="" class="auto-img">
                                </div>
                                <div class="lit con2">
                                    <img src="../assets/img/ia_100000166.jpg" alt="" class="auto-img">
                                </div>
                            </div>
                        </div>
                        <h3>旅行</h3>
                    </div>
                    
                </router-link>
            </div>
        </div>
        <foot-navbar></foot-navbar>
    </div>
</template>

<script>
import FootNavbar from '../components/FootNavbar.vue'


    export default {
  components: { FootNavbar },
       
    }
</script>

<style lang="scss" scoped>
.Tabs {
    h3{
        font-size: 20px;
    }
  .navtitle {
    width: 100%;
    background-color: #fff;
    position: sticky;
    top: 60px;
    left: 0;
    z-index: 10;
    box-shadow: 0 1px 1px #ccc;
    ul {
      display: flex;
      justify-content: center;
      li {
        display: flex;
        align-items: center;
        height: 60px;
        font-weight: bold;
        font-size: 14px;
        margin: 0 15px;
        a {
          color: #999;
          &:hover {
            color: #1088f2;
          }
        }
        &.con {
          border-bottom: 2px solid #1088f2;
          a {
            color: #000;
          }
        }
      }
    }
  }
  .main {
    padding-top: 20px;
    background-color: #f7f8f9;
  }
  .contentbox {
    width: 390px;
    height: 280px;
    box-sizing: border-box;
    padding: 16px;
    border-radius: 5px;
    box-shadow: 0 0 3px #ccc;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 16px;
    .bigimg {
      width: 208px;
      height: 208px;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      overflow: hidden;
    }
    .lit {
      width: 145px;
      height: 102px;
      overflow: hidden;
    }
  }
  .imglit {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    div {
      &.con1 {
        border-top-right-radius: 5px;
      }
      &.con2 {
        border-bottom-right-radius: 5px;
      }
    }
  }
  .topmain {
    display: flex;
    justify-content: space-between;
  }
  .box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

</style>